
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>上墙弹幕</title>
    <link rel="stylesheet" type="text/css" href="../addons/jy_h5game/resource/xianchang/css/basic.css">
	<script src="../addons/jy_h5game/resource/xianchang/js/basic2.js" type="text/javascript" charset="utf-8"></script>
	<script src="../addons/jy_h5game/resource/xianchang/js/screen_dm.js" type="text/javascript" charset="utf-8"></script>
	
	<script src="../addons/jy_h5game/resource/xianchang/js/tool.js" type="text/javascript" charset="utf-8"></script>
    
	
		  


<style>
/**/
.boxDom { position: absolute; top:35px ;  bottom: 100px; left: 0; right: 0; z-index: 801; }
.string { width:500px;height: 60px; position: absolute;color: #000; cursor: pointer; white-space: nowrap; }
.d_show, .d_show li { list-style: none; margin: 0; padding: 0; }
 
.d_show li { font-size: 30px; font-weight: 500; color: #fff; position: absolute; left: 0; top: 0; }
.tmtx { width: 55px; height: 55px; background-color: #FFF; border-radius: 100%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 0 0px 3px rgba(0,0,0,0.15); float: left; margin-right: 10px; }
.tmtx img { width: 100%; height: 100%; }
.tmwz { overflow: hidden; }
.tmwz p { margin: 0; padding: 0; }
.tmnc { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); color: #FFF }
.tmnr { margin: 0; padding: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); color: #FFF }
</style> 
<div class="Panel MsgList"  style="display:none">
     <div class="boxDom" id="boxDom">  
	</div>
</div>
<script>
require(['jinyun_socket'],function(jinyun_socket){
    jinyun_socket.connect(function(){
	 jinyun_socket.join(1);
	});
   //加入聊天室
    jinyun_socket.onmessage=function(res){
			var info= JSON.parse(res.message);
			var pageW=parseInt($("#boxDom").width());
			var pageH=parseInt($("#boxDom").height());
			var Top,Right;
			var width;
			width=pageW;
			
            var creSpan=$("<ul class='string d_show'></ul>");
            creSpan.html('<li><div class="tmtx"><img src="' + info.avatar +'"></div><div class="tmwz"><p class="tmnc">'+info.nickname+'</p><p class="tmnr">'+info.message+'</p></div></li>');
           
            Top=parseInt(pageH*(Math.random()));
            
			
            creSpan.css({"top":Top,"right":-300,"color":"#FFF"});
            $("#boxDom").append(creSpan);
            var spanDom=$("#boxDom>ul:last-child");
			var num=parseInt(30000*(Math.random()))+5000;
            spanDom.stop().animate({"right":pageW+300},num,"linear",function(){
                        $(this).remove();
               });
			 $(".Panel.Top").css({
                top: 0
            });
             $(".Panel.Bottom").css({
                bottom: 0
            });	
            $(".Panel.MsgList").css({
                display: "block",
                opacity: 1
            });
			
	
		scope.$apply();
    }
   //向ID为2的用户发送消息
});

</script>
<link rel="stylesheet" type="text/css" href="../addons/jy_h5game/resource/xianchang/css/footer.css">

   <style>
	body {background: url(../addons/jy_h5game/resource/xianchang/style/all/035d.jpg) #000;background-size: cover;}
   </style>

</html>